<template>
  <div style="display:flex; gap:8px; align-items:center;">
    <select class="select" :value="sortBy" @change="onChangeField">
      <option v-for="f in fields" :key="f.value" :value="f.value">按{{ f.label }}</option>
    </select>
    <button class="btn" @click="toggleOrder">
      {{ sortOrder === 'asc' ? '升序 ↑' : '降序 ↓' }}
    </button>
  </div>
  
</template>

<script>
export default {
  name: 'SortControl',
  props: {
    fields: { type: Array, required: true },
    sortBy: { type: String, required: true },
    sortOrder: { type: String, default: 'desc' },
  },
  emits: ['change'],
  setup(props, { emit }) {
    const onChangeField = (e) => emit('change', { sortBy: e.target.value, sortOrder: props.sortOrder })
    const toggleOrder = () => emit('change', { sortBy: props.sortBy, sortOrder: props.sortOrder === 'asc' ? 'desc' : 'asc' })
    return { onChangeField, toggleOrder }
  }
}
</script>

